<template>
  <NuxtLayout>
    <Head>
      <Title>UI组件</Title>
      <Meta name="description" content="UI组件" />
    </Head>
    <Banner title="众多的UI组件集合" label="提交你的UI组件" :feature="feature" class-name="app-ui-banner" :btn-url="`${baseUrl}/post/edit?nav_id=2`" />
    <ClientOnly>
      <AdminContribute v-model:edit-visible="editVisible" :set-edit-visible="setEditVisible" :tag-list="state.tagList" :create-data="createData" @handleSearch="onSearch" />
    </ClientOnly>
    <div ref="listRef" class="container app-page-admin my-5 relative">
      <SearchBar :is-show-tag="false" :is-show-back="false" :tag-list="state.tagList" @handleSearch="onSearch" />
      <Loading :show="loading" />
      <div class="app-admin-body">
        <el-row :gutter="30">
          <el-col v-for="(item, index) in state.list" :key="index" class="app-admins-col" :xs="24" :sm="12" :md="6">
            <CardItem :data="item" />
          </el-col>
          <ClientOnly>
            <el-col v-if="!state.list.length">
              <el-empty description="暂无数据" :image-size="100" />
            </el-col>
          </ClientOnly>
        </el-row>
      </div>
      <!-- /body -->
      <div class="app-page flex justify-between">
        <div />
        <el-pagination v-model:page-size="limit" background layout="total, prev, pager, next, jumper" :total="state.total" @current-change="onCurrentChange" />
      </div>
      <!-- /page -->
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { set } from '@vueuse/core'
import { cloneDeep } from 'lodash-es'
import { BasePagination } from '~~/config'

const { page, limit } = BasePagination
const state = reactive<any>({
  // 列表数据
  list: [],
  // 标签列表
  tagList: [],
  // 总页数
  total: 0,
  // 查询对象
  queryParams: {
    version: 3,
    navId: 2,
    title: '',
    page,
    limit,
  },
})

const baseUrl = import.meta.env.VITE_API_BaseURL
const feature = ['快速干净', '简单方便', '功能丰富']
const loading = ref(true)
const editVisible = ref(false)
const setEditVisible = () => {
  set(editVisible, false)
}
// 获取列表
const getList = async () => {
  set(loading, true)
  const { data }: any = await useAsyncData('use_ArticleData', () => useArticleData(state.queryParams))
  state.list = data.value.rows
  state.total = data.value.page.total

  setTimeout(() => {
    set(loading, false)
  }, 200)
}

getList()

// 获取列表
const getTags = async () => {
  const { data }: any = await useAsyncData('use_TagsData', () => useTagsData({ type: 1 }))
  state.tagList = data.value.rows
}

getTags()

// 处理翻页
const onCurrentChange = (page: number) => {
  state.queryParams.page = page

  getList()
}

// 搜索
const onSearch = (modelForm: any) => {
  const params = cloneDeep(modelForm)
  delete params.tagId
  Object.assign(state.queryParams, params)

  if (!params.tagId) {
    delete state.queryParams.tagId
  }

  if (!params.backendId) {
    delete state.queryParams.backendId
  }

  getList()
}

// 新增数据
const createData = (data: any) => {
  fetchArticleAdd(data).then((res: any) => {
    res ? handleSuccess() : notice(res?.error || '新增失败，请稍候在试~！', 'error')
  })
}

// 处理成功
const handleSuccess = () => {
  refreshData()
}

// 刷新数据
const refreshData = () => {
  getList()

  notice('提交成功')
}
</script>
<style lang="scss" scoped>
.app-page-admin {
  border: 1px slid #ccc;
}
</style>
